<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        key作用：给元素添加唯一的标识，便于Vue进行列表项的正确排序复用
        v-for 中的key-不加key：
        v-for的默认行为会尝试原地修改元素(就地复用)
        注意点：
        1.key的值只能是字符串或者数字类型
        2.key的值必须具有唯一性
        3.推荐使用id作为key(唯一),不推荐使用index 作为key(会变化,不对应)
    -->
    <div id="app">
        <h3>zzaisx的书店</h3>
        <ul>
            <li v-for="(item,index) in bookList " :key="item.id">
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <!-- 注册点击事件 通过id 进行删除数组中的对应项 -->
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                bookList:[
                    {id:1,name:"《红楼梦》",author:"曹雪芹"},
                    {id:2,name:"《西游记》",author:"吴承恩"},
                    {id:3,name:"《水浒传》",author:"施耐庵"},
                    {id:4,name:"《三国演义》",author:"罗贯中"},
                ]
            },
            methods:{
                del(id){
                    //通过 id 进行删除数组中的 对应项 => filter
                    //filter：根据条件，保留满足条件的对应项，得到一个新数组
                   this.bookList= this.bookList.filter(item=>item.id !== id)
                },
                
            }
            
        })
    </script>
    
</body>
</html>